<template>
<div class="color_taking_cp">
    <div class="one">
        <div class="container">
            <img 
                ref="img"
                crossorigin="anonymous"
                :src="img_data" 
                alt="毒蘑菇"
                @click="on_color_click($event)"
                @mousemove="on_mousemove">
            <Color_taking_show
                :show="color_taking_show_show && !loading"
                :offset_x="mouse_event.offsetX || 0"
                :offset_y="mouse_event.offsetY || 0"
                :color_list="Array.from(show_color)">
            </Color_taking_show>
        </div>
        {{loading}}
        <div class="color">
            <div 
                class="item"
                v-for="(item,index) in color_list"
                :key="index"
                :style="{
                    backgroundColor:'rgb('+item[0]+','+item[1]+','+item[2]+')',
                }">
            </div>
        </div>
    </div>
    <div class="two">
        <div class="change_photo">
            <el-input placeholder="请输入内容" v-model="img_link" class="input-with-select">
                <el-button 
                    slot="append" 
                    icon="el-icon-brush"
                    @click="on_taking">
                </el-button>
            </el-input>
            <div>
               您可以输入图片链接或者直接上传本地文件进行取色 
            </div>
            <File_choose
                @file_change="on_file_change">
            </File_choose>
        </div>
        <div class="item">
            <div class="title">
                主题色
            </div>
            <div 
                class="color"
                :style="{
                    backgroundColor:'rgb('+theme_color[0]+','+theme_color[1]+','+theme_color[2]+')',
                }">
            </div>
        </div>
        <div class="item">
            <div class="title">
                选中色
            </div>
            <div 
                class="color"
                :style="{
                    backgroundColor:'rgb('+click_color[0]+','+click_color[1]+','+click_color[2]+')',
                }">
            </div>
        </div>
    </div>
</div>
</template>

<script>
import ColorThief from 'colorthief'
import File_choose from '@/components/color_taking_cp/file_choose'
import Color_taking_show from '@/components/color_taking_cp/color_taking_show'
export default {
    name: 'HelloWorld',
    components:{File_choose,Color_taking_show},
    data () {
        return {
            loading:true,
            color_taking_show_show:false, //控制颜色采取展示的显示
            mouse_event:{ //鼠标事件对象(存的偏移位置)
                offsetX:0,
                offsetY:0,
            }, 
            img_data:null, //img的数据（二进制）
            img_link:'', //img的链接
            img_el:null, //img元素对象
            theme_color:[], //img图片的主题色(存的RGB数组)
            click_color:[], //img图片点击位置的颜色
            show_color:[], //需要展示的颜色
            color_list:[], //img图片的次级配色
        }
    },
    mounted(){
        this.init_img();
        document.addEventListener('mousemove', event => {  //如果不是在组件上移动的则隐藏该组件
            const e = event || window.event;
            if (this.$refs.img && !this.$refs.img.contains(e.target)) {
                this.color_taking_show_show = false;
            }
        });
        window.addEventListener('keydown',this.handle_keyup); //添加键盘监听
    },
    methods:{
        init_img(){  //初始化img元素的触发事件
            const img_el = this.$refs.img;
            img_el.onload = ()=> {
                this.taking_color_by_img_el(img_el);
                this.init_canvas();
                this.loading = false;
            }
            img_el.onerror = ()=>{
                this.loading = false;
            }
        },
        init_canvas(){ //初始化cavans(填充图片)
            const img_el = this.$refs.img;
            this.canvas = document.createElement('canvas');
            this.canvas_context = this.canvas.getContext && this.canvas.getContext('2d');
            this.canvas.height = img_el.offsetHeight || img_el.height;
            this.canvas.width = img_el.offsetWidth || img_el.width;
            this.canvas_context.drawImage(img_el, 0, 0,this.canvas.width,this.canvas.height);
        },
        on_file_change(file){ //文件选择后触发
            this.loading = true;
            var reader = new FileReader(); 
            reader.readAsDataURL(file.raw); 
            const that = this;
            reader.onload = function(){ //转化为二进制数据
               that.img_data = this.result;
            } 
        },
        on_taking(){ //输入图片链接后开始采取颜色
            this.img_data = this.img_link;
        },
        on_mousemove(event){ //鼠标移动事件
            this.color_taking_show_show = true;
            this.mouse_event.offsetY = event.offsetY;
            this.mouse_event.offsetX = event.offsetX;
            this.show_color = this.taking_color_by_xy(event.offsetX,event.offsetY,11);
        },
        on_color_click(){ //根据点击事件获取点击位置的颜色
            this.click_color = this.taking_color_by_xy(this.mouse_event.offsetX+5,this.mouse_event.offsetY+5,1);
        },
        taking_color_by_xy(x,y,h=1){ //根据图片坐标,区域获取相应区域的颜色
            var rgb_data = [0,0,0]; //默认返回色
            if (!this.canvas_context) {
                return rgb_data;
            }
            try {
                rgb_data = this.canvas_context.getImageData(x, y, h, h).data;
            } catch(e) {
                return rgb_data;
            }
            return rgb_data;
        },
        taking_color_by_img_el(img_el){ //根据img元素采取主色及4个配色
            var colorThief = new ColorThief();
            this.theme_color = colorThief.getColor(img_el);
            this.color_list = colorThief.getPalette(img_el,4);
        },
        // 键盘事件（上下左右键）
        handle_keyup(event){
            const e = event || window.event || arguments.callee.caller.arguments[0];
            if(!e) return;
            switch(e.keyCode){ //根据键盘改变坐标获得相应位置色素
                case 37: //左
                    this.show_color = this.taking_color_by_xy(--this.mouse_event.offsetX,this.mouse_event.offsetY,11);
                    break;
                case 38: //上
                    this.show_color = this.taking_color_by_xy(this.mouse_event.offsetX,--this.mouse_event.offsetY,11);
                    break;
                case 39: //右
                    this.show_color = this.taking_color_by_xy(++this.mouse_event.offsetX,this.mouse_event.offsetY,11);
                    break;
                case 40: //下
                    this.show_color = this.taking_color_by_xy(this.mouse_event.offsetX,++this.mouse_event.offsetY,11);
                    break;
                default:
                    break;
            }
            this.on_color_click();
        },
    }
}
</script>

<style scoped lang="scss">
.color_taking_cp{
    height: fit-content;
    max-width: 1000px;
    width: 100%;
    display: grid;
    border-radius: 5px;
    grid-template-columns: 1fr 250px;
    grid-gap: 35px;
    text-align: left;
    color: rgb(131, 131, 131);
    >.one{
        >.container{
            width: 100%;
            height: fit-content;
            position: relative;
            >img{
                width: 100%;
                border-radius: 3px;
                cursor:none;
                box-shadow: 1px 1px 2px 0 rgba(0,0,0,.05)!important;
                overflow: hidden;
            }
        }
        >.color{
            margin-top: 35px;
            height: 80px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            border-radius: 3px;
            overflow: hidden;
            transition: all 0.2s;
        }
    }
    >.two{
        >.change_photo{
            display: grid;
            flex-direction: column;
            align-items: flex-start;
            line-height: 130%;
            font-size: 14px;
            grid-gap: 15px;
        }
        >.item{
            margin-top: 35px;
            >.title{
                font-size: 15px;
                line-height: 100%;
            }
            >.color{
                width: 100px;
                height: 50px;
                border-radius: 3px;
                margin-top: 15px;
                transition: all 0.2s;
            }
        }
    }
}
</style>